<template>
  <div class="head">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div class="boxs">
      <div class="titles">航班查询-预订机票</div>
      <el-form
        :inline="true"
        :rules="rules"
        ref="formInline"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="航程类型" prop="TripType">
          <el-radio-group v-model="formInline.TripType">
            <el-radio :label="1">单程</el-radio>
            <el-radio :label="2">往返</el-radio>
            <!-- <el-radio :label="0">往返-自由搭配</el-radio> -->
          </el-radio-group> </el-form-item
        ><br />
        <el-form-item label="出发城市" prop="cityName">
          <!-- :filter-method='filtermethod' -->
          <el-select
            clearable
            @change="cityChange2"
            :default-first-option="true"
            v-model="formInline.cityName"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in restaurantList"
              :key="index"
              :label="
                item.airportCityName +
                '-' +
                item.airportId +
                '-' +
                item.airportCityJpinyin +
                '-' +
                item.airportCityPinyin
              "
              :value="item.airportId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到达城市" prop="cityName1">
          <el-select
            clearable
            @change="cityChange3"
            :default-first-option="true"
            v-model="formInline.cityName1"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in restaurantList"
              :key="index"
              :label="
                item.airportCityName +
                '-' +
                item.airportId +
                '-' +
                item.airportCityJpinyin +
                '-' +
                item.airportCityPinyin
              "
              :value="item.airportId"
            >
            </el-option>
          </el-select>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="formInline.cityName1"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="cityChange1"
            @change="cityChange3"
             @keyup.delete.native="accountLogin('nextRef')" 
          ></el-autocomplete> -->
        </el-form-item>
        <el-form-item label="出发日期" prop="date1">
          <!-- <el-date-picker :picker-options="pickerOptions" v-model="formInline.date1" type="date"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" @change="dateChange">
          </el-date-picker> -->
          <j-date-picker
            v-model="value1"
            id="value1"
            :width="width1"
            :picker-options="pickerOptions1"
            :rangeSeparato="rangeSeparator"
            @change="onDateChange"
            :disabled="disabled"
            :showLunarClass="showLunarClass"
            :showLunarControl="showLunarControl"
            :type="typenl"
            :showBackYears="showBackYears"
            :showLunarIcon="showLunarIcon"
            :format="format"
          >
          </j-date-picker>
        </el-form-item>
        <el-form-item
          label="返程日期"
          prop="date2"
          v-if="formInline.TripType != 1"
        >
          <!-- <el-date-picker :picker-options="pickerOptions" v-model="formInline.date2" type="date"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" align="right" placeholder="选择日期" @change="dateChange1">
          </el-date-picker> -->
          <j-date-picker
            v-model="value2"
            :width="width1"
            :picker-options="pickerOptions1"
            :rangeSeparato="rangeSeparator"
            @change="dateChange1"
            :disabled="disabled"
            :showLunarClass="showLunarClass"
            :showLunarControl="showLunarControl"
            :type="typenl"
            :showBackYears="showBackYears"
            :showLunarIcon="showLunarIcon"
            :format="format"
          >
          </j-date-picker>
        </el-form-item>
        <el-form-item label="HOT">
          <!-- <el-checkbox v-model="formInline.children">是否携带儿童(可查询儿童特价)</el-checkbox> -->
          <el-checkbox v-model="formInline.children">携带儿童</el-checkbox>
          <el-checkbox v-model="formInline.hasBaby">携带婴儿</el-checkbox>
        </el-form-item>
        <!-- <el-form-item label="计划机型">
          <el-select
            clearable
            v-model="formInline.airType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeList"
              :key="item.index"
              :label="item.type"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="航空公司" v-if="formInline.TripType == 1">
          <el-select
            clearable
            v-model="formInline.airliner"
            placeholder="请选择"
          >
            <el-option
              v-for="item in airlinerList"
              :key="item.id"
              :label="item.airlinerShorter"
              :value="item.airlinerId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="舱位等级" v-if="formInline.TripType == 1" label-width="70px">
          <el-select
            clearable
            v-model="formInline.cabin"
            placeholder="不限舱位"
          >
            <el-option
              v-for="item in cabinList"
              :key="item.index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式">
          <el-radio-group v-model="formInline.resource">
            <el-radio label="runtime">起飞时间从早到晚</el-radio>
            <el-radio label="departtime">舱位价格从低到高</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search('formInline')"
            >搜索</el-button
          >
          <el-button type="primary" @click="createSearch()"
            >新建标签页搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import Query from "../flight/query.vue";
import Flightlist from "../reserve/flightlist.vue";
import Flightschedule from "../reserve/flightschedule.vue";
import crumbs from "../../components/Crumbs.vue";
import Format from "../../common//format.js";
import pinyin from "pinyin-match";
import JDatePicker from "vue-jlunar-datepicker";
export default {
  name: "",
  components: {
    // Query,
    Flightlist,
    crumbs,
    Flightschedule,
    pinyin,
    JDatePicker,
  },
  data() {
    return {
      // 农历日期
      value1: "",
      value2: "",
      typenl: "DATE",
      showLunarClass: "MIX",
      showBackYears: 2,
      showLunarIcon: true,
      showLunarControl: true,
      width1: "220",
      format: "YYYY-MM-DD",
      rangeSeparator: "-",
      disabled: false,
      editable: true,
      clearable: true,
      pickerOptions1: {},
      // 农历日期结束
      selectSiteList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "后天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      listinfo: {},
      screen: {
        time: "",
        cabin: "",
        carrier: "",
      },
      BreadCrumb: [
        {
          path: "/flight/reserve",
          name: "机票查询",
        },
      ],
      cabinList: ["不限舱位", "经济舱", "公务舱/头等舱"],
      // 航空公司
      airlinerList: [],
      formInline: {
        TripType: 1,
        cityName: "",
        cityName1: "",
        date1: "",
        date2: "",
        label: "",
        cabin: "",
        children: false,
        hasBaby: false,
        airliner: "",
        resource: "departtime",
        airType: "",
      },
      rules: {
        TripType: [
          {
            required: true,
            message: "请选择航程",
            trigger: "change",
          },
        ],
        cityName: [
          {
            required: true,
            message: "请选择出发城市",
            trigger: "change",
          },
        ],
        cityName1: [
          {
            required: true,
            message: "请选择到达城市",
            trigger: "change",
          },
        ],
        date1: [
          {
            required: true,
            message: "请选择出发日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            required: true,
            message: "请选择到达日期",
            trigger: "change",
          },
        ],
      },
      checked: true,
      options: [],
      value: "",
      optionsed: [],
      type: [],
      typeList: [
        {
          id: "大",
          type: "大机型",
          is: false,
        },
        {
          id: "中",
          type: "中机型",
          is: false,
        },
        {
          id: "小",
          type: "小机型",
          is: false,
        },
      ],
      cityList: [],
      oneway: [
        {
          id: 0,
          cwcity: "北京",
          ddcity: "上海",
          gotime: "",
          ddtime: "",
          goweekday: "今天",
          ddweekday: "今天",
        },
      ],
      // 往返
      journeyway: [
        {
          id: 0,
          cwcity: "北京",
          ddcity: "上海",
          gotime: "",
          ddtime: "",
          goweekday: "今天",
          ddweekday: "今天",
        },
      ],
      restaurantList: [],
    };
  },
  // created(){
  //   this.restaurants =
  // },
  methods: {
    onDateChange(val) {
      this.formInline.date1 = val;
      if (this.formInline.TripType == 1) {
        this.oneway[0].gotime = this.formInline.date1;
      } else if (this.formInline.TripType == 2) {
        this.journeyway[0].gotime = this.formInline.date1;
        this.formInline.date2 = this.formInline.date1;
        this.journeyway[0].ddtime = this.formInline.date1;
      }
    },
    dateChange1(val) {
      this.formInline.date2 = val;
      if (this.formInline.TripType == 1) {
        this.oneway[0].ddtime = this.formInline.date2;
        this.oneway[0].goweekday = Format.getweekday(this.oneway[0].ddtime);
      } else if (this.formInline.TripType == 2) {
        this.journeyway[0].ddtime = this.formInline.date2;
        this.journeyway[0].goweekday = Format.getweekday(this.oneway[0].ddtime);
      }
    },

    // pinyingMatch(val) {
    //   var that = this
    //   const pinyingMatch = require("pinyin-match");
    //   if (val) {
    //     var result = [];
    //     //
    //     //注意otherList是内容数组，根据自己项目修改
    //     that.restaurants.forEach((e) => {
    //     //注意，e.employeeName是遍历数组之后的键，按需修改
    //       var m = pinyingMatch.match(e.employeeName, val);
    //       // console.log(m);
    //       if (m) {
    //         result.push(e);
    //       }
    //     });
    //     //搜索到相应的数据就把符合条件的n个数据赋值brand
    //     that.restaurants = result;
    //   } else {
    //     //没有搜索到数据，就还展示所有的brand
    //     //copyotherList也是内容数组，为了显示全部，需要添加进之前的内容
    //     that.restaurants = that.copyotherList;
    //   }
    // },
    // 城市通过拼音搜索中文
    // 点击新建标签页 将当前的路由传递到 tagslist数组中
    createSearch() {
      // console.log(this.$route.path);
      // bus.$emit("tags",'orderqueryss');
      window.open(
        "http://172.16.7.51:7777/#/flight/reserve", //需要跳转的路由
        "_blank", //是否在新的页面打开
        "width=1500,height=800,toolbar=no"
      );
    },
    search(formName) {
      // this.$router.push("/reserve/flightlist");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ticketlist();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    flightCityList() {
      this.$axios.getQueryAllCRMByIsUsed().then((res) => {
        console.log(res);
        if (res.code == "00000") {
          this.restaurantList = res.data;
          // return this.restaurants
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // dateChange() {
    //   if (this.formInline.TripType == 1) {
    //     this.oneway[0].gotime = this.formInline.date1;
    //     console.log(this.oneway[0].gotime);
    //   } else if (this.formInline.TripType == 2) {
    //     this.journeyway[0].gotime = this.formInline.date1;
    //     this.formInline.date2 = this.formInline.date1;
    //     this.journeyway[0].ddtime = this.formInline.date1;
    //     console.log(this.oneway[0].gotime);
    //   }
    // },
    // dateChange1() {
    //   if (this.formInline.TripType == 1) {
    //     this.oneway[0].ddtime = this.formInline.date2;
    //     this.oneway[0].goweekday = Format.getweekday(this.oneway[0].ddtime);
    //   } else if (this.formInline.TripType == 2) {
    //     this.journeyway[0].ddtime = this.formInline.date2;
    //     this.journeyway[0].goweekday = Format.getweekday(this.oneway[0].ddtime);
    //   }
    // },
    cityChange(item) {
      if (this.formInline.TripType == 1) {
        this.oneway[0].cwcity = item.value;
        console.log(this.oneway[0].cwcity);
      } else if (this.formInline.TripType == 2) {
        this.journeyway[0].cwcity = item.value;
        console.log(this.journeyway[0].cwcity);
      }
    },
    handleSelect(item) {
      console.log(item);
    },
    cityChange2() {
      console.log(this.formInline.cityName);
      this.oneway[0].cwcity = this.formInline.cityName;
    },
    cityChange3() {
      console.log(this.formInline.cityName1);
      this.oneway[0].ddcity = this.formInline.cityName1;
    },
    cityChange1(item) {
      console.log(item);
      this.$axios
        .getqueryLikeByStation({
          name: item.value,
        })
        .then((res) => {
          if (res.code == "200") {
            if (this.formInline.TripType == 1) {
              this.oneway[0].ddcity = this.formInline.cityName1;
              console.log(this.oneway[0].ddcity);
            } else if (this.formInline.TripType == 2) {
              this.journeyway[0].ddcity = this.formInline.cityName1;
              console.log(this.journeyway[0].ddcity);
            }
          }
        });
    },
    // 航空公司
    getflightlist() {
      this.$axios.getairportList({pageSize:10000}).then((res) => {
        if (res.code == "00000") {
          let list = JSON.parse(JSON.stringify(res.data.records));
          this.airlinerList = list.filter((item) => {
            if (item.airliner != null && item.airlinerShorter != null && item.isInland == "0") {
              return item;
            } else {
            }
          });
          this.airlinerList.forEach((item) => {
            item.airlinerShorter = item.airlinerId + "_" + item.airlinerShorter;
          });
          console.log(this.airlinerList);
        }
      });
    },
    // 获取城市列表
    getselectCityList() {},
    // 查询机票
    ticketlist() {
      let list = this.cabinList.filter((item) => {
        if (item.is == true) {
          return index;
        }
      });
      console.log(list);
      console.log(this.oneway);
      // 单程
      let GoSearchWhere = {
        // formInline.children
        listinfo: this.oneway[0],
        // 是否携带儿童
        children: this.formInline.children,
        hasBaby: this.formInline.hasBaby,
        shipping: (this.formInline.cabin == "不限舱位" || !this.formInline.cabin)? -1: this.formInline.cabin == "经济舱"? 0 : 1,
        TripType: this.formInline.TripType * 1,
        airliner: this.formInline.airliner,
        airType: this.formInline.airType,
        resource: this.formInline.resource,
      };
      // 返程
      let BackSearchWhere = {
        OrgAirport: this.formInline.cityName,
        DstAirport: this.formInline.cityName1,
        DepDate: this.formInline.date1,
        ArrivedDate: this.formInline.date2,
        airliner: this.formInline.airliner,
        children: this.formInline.children,
        hasBaby: this.formInline.hasBaby,
        resource: this.formInline.resource,
      };
      if (this.formInline.TripType == 1) {
        console.log(GoSearchWhere,this.formInline);
        this.$router.push({
          name: "flightlist",
          params: {
            GoSearchWhere: GoSearchWhere,
            TripType: 1,
            resource: this.formInline.resource,
          },
        });
      } else if (this.formInline.TripType == 2) {
        console.log(GoSearchWhere,BackSearchWhere);
        this.$router.push({
          name: "Backforth",
          params: {
            GoSearchWhere: GoSearchWhere,
            BackSearchWhere: BackSearchWhere,
            TripType: 2,
          },
        });
      }
    },
    accountLogin(nextRef) {
      this.$refs[nextRef].focus();
    },
  },
  mounted() {
    this.flightCityList();

    this.getflightlist();
    // if (this.formInline.TripType == 1) {
    //   let info = this.oneway
    //   info[0].cwcity = this.formInline.cityName
    //   info[0].ddcity = this.formInline.cityName1
    //   info[0].gotime = this.formInline.date1
    //   info[0].goweekday = Format.getweekday(this.formInline.aircraftweek)
    //   info[0].ddtime = this.formInline.date2
    //   info[0].ddweekday = Format.getweekday(this.formInline.aircraftweeked)

    // } else if (this.formInline.TripType == 2) {
    //   let info = this.journeyway
    //   info[0].cwcity = this.formInline.cityName
    //   info[0].ddcity = this.formInline.cityName1
    //   info[0].gotime = this.formInline.date1
    //   info[0].goweekday = Format.getweekday(this.formInline.aircraftweek)
    //   info[0].ddtime = this.formInline.date2
    //   info[0].ddweekday = Format.getweekday(this.formInline.aircraftweeked)
    // } else {}
    //  this.copy = Object.assign(this.restaurants)
  },
};
</script>
<style scoped>
.boxs {
  width: 650px;
  margin: 0px auto;
  /* margin: 50px 0 0 173px; */
}

.head {
  padding: 30px 0 0 30px;
}

/deep/.el-select-group__wrap {
  display: flex;
}

/deep/.el-select-group {
  display: flex;
  flex-wrap: wrap;
}
/deep/.full-jcalendar__main {
  line-height: 20px !important;
}
/deep/.week-row {
  line-height: 20px !important;
}

/deep/.el-popper[x-placement^="bottom"] {
  width: 400px !important;
}

.el-radio__label {
  display: block;
}
</style>>